/**
 * 该场景非固定长宽: 1920 x 1080
 * 
 * HTML 设置方案
 * #main
 *   #bg (底层) -> zrender
 *   #content (上层) -> ?
 */

import { BanPick, Replayer, buildAction } from '../compute/banPick';
import { Lottery } from '../compute/lottery';
import { Painter } from '../ui/s11/painter';

function createScene(context) {
	let t = new App(context);
	global.app = t;
	let scene = new context.Scene({
		require : ['zrender'],
		init : (libs) => t.init(libs),
		destroy : () => t.destroy(),
		collectInfo : () => t.collectInfo(),
		onMessage : (key, data) => t.onMessage(key, data),
	});
	t.sendStatus = scene.sendStatus;
	return scene;
};

/** @type {HTMLElement} */
let elMain;
/** @type {HTMLElement} */
let elBg;
/** @type {HTMLElement} */
let elContent;

const defaultWidth = 1920;
const defaultHeight = 1080;

function initDom(width = defaultWidth, height = defaultHeight) {
	if (elMain == null) {
		elMain = document.getElementById('main');
		elMain.style.width = width + 'px';
		elMain.style.height = height + 'px';
	}

	if (elBg == null) {
		elBg = document.createElement('div');
		elBg.style.position = 'absolute';
		elBg.style.overflow = 'hidden';
		elBg.style.left = '0px';
		elBg.style.top = '0px';
		elMain.appendChild(elBg);
	}
	elBg.style.width = width + 'px';
	elBg.style.height = height + 'px';

	if (elContent == null) {
		elContent = document.createElement('div');
		elContent.style.position = 'absolute';
		elContent.style.overflow = 'hidden';
		elContent.style.left = '0px';
		elContent.style.top = '0px';
		elMain.appendChild(elContent);
	}
	elContent.style.width = width + 'px';
	elContent.style.height = height + 'px';
}


class App {
	constructor(context) {
		this.context = context;
	}

	/**
	 * normal   一般模式
	 * replay   播放 preset 模式
	 * lottery  抽奖机模式
	 */
	mode = 'normal';
	zrender = null;
	zr = null;

	init(libs) {
		initDom();
		
		this.zrender = libs.zrender;
		this.zr = this.zrender.init(elBg);

		this.banPick = new BanPick({
			context : this.context
		});
		this.banPick.onUpdated = () => this.sendStatus();
		this.replayer = new Replayer(this.banPick);
		this.lottery = new Lottery(this.context, this.banPick);

		this.painter = new Painter({
			zrender : this.zrender,
			zr : this.zr,
			context : this.context,
			banPick : this.banPick,
		});
		this.painter._init();

		setTimeout(() => this.showPanel(), 500);
	}

	destroy() {
		//
	}
	
	/* **********
	 * 状态控制 *
	 ********** */

	collectInfo() {
		return {
			mode : this.mode,
			panel : this.banPick.collectInfo(),
			// player: this.replayer.collectInfo(),
			lottery: this.lottery.collectInfo(),
		}
	}

	onMessage(name, arg) {
		switch (name) {
			case '/actions/run': {
				console.log('/actions/run', '可以 run 多个, 不过是立即执行');
				this.runActions(arg.list);
				this.sendStatus();
			} return;
			case '/preset/load': {
				console.log('/preset/load', '读取预设, 可以后台传也可以指定文件名');
				this.loadActions(arg.list);
				this.sendStatus();
			} return;
			case '/assets/load': {
				console.log('/assets/load', '修改界面上的文字等等');
				this.banPick.assetsLoad(arg);
				this.sendStatus();
			} return;
			case '/panel/mode': {
				console.log('/panel/mode', '修改模式, 是默认模式、自动播放 (preset) 模式、抽奖机模式');
				this.updateMode(arg.mode);
				this.sendStatus();
			} return;
			case '/lottery/load': {
				this.lottery.load(arg);
				this.sendStatus();
			} return;
			case '/lottery/connect': { // 连接弹幕
				this.lottery.connect(arg.roomId);
				this.sendStatus();
			} return;
			case '/lottery/open': { // 开始监听弹幕
				this.lottery.open();
				this.sendStatus();
			} return;
			case '/lottery/close': { // 停止监听弹幕
				this.lottery.close();
				this.sendStatus();
			} return;
			case '/lottery/pick': { // 从哪个 pick seat 里面抽
				this.lottery.pick(arg.seatName);
				this.sendStatus();
			} return;
		}
		console.log("bottom 收到命令: " + name);
		console.log(arg);
	}

	// 方便的执行方法
	showPanel() {
		this.mode = 'replayer';
		this.replayer.run();
	}

	stopPanel() {
		this.mode = 'normal';
		this.replayer.stop();
	}

	runAction(name, arg) {
		this.replayer.actNow(buildAction(name, 0, arg));
	}

	/**
	 * @param {object[]} list 
	 */
	runActions(list) {
		list.forEach(p => this.runAction(p.name, p.arg));
	}

	/**
	 * @param {object[]} list 
	 */
	loadActions(list) {
		this.replayer.load(list.map((p) => buildAction(p.name, p.time, p.param)));
	}

	updateMode(mode) {
		const old = this.mode;
		switch (mode) {
			case 'normal': {
				//
			} break;
			case 'replay': {
				if (old == 'replay') {
					return;
				}
				this.showPanel()
			} break;
			case 'lottery': {
				this.lottery.initBanPick();
			} break;
			default: return;
		}

		if (old == 'replay') {
			this.stopPanel();
		}
	}
}

export default createScene;
